<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
-->
<!-- 
* @desc:任务编排
* @fileName:TaskArrangement.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-4-8
!-->
<script setup lang="ts">
import { onMounted, reactive } from "vue";
import TheTree from "@/components/common/tree.vue";
import ArrangementSearch from "@/views/TaskSchedule/TaskArrangement/components/arrangement-search.vue";
import ArrangementDetails from "@/views/TaskSchedule/TaskArrangement/components/arrangement-details.vue";
import TaskPagination from "@/components/common/pagination.vue";
import OperationDialog from "./components/operation.vue";
import { getCurrentInstance } from "vue";
import { ElMessageBox } from "element-plus";
import { showSuccessMessage, showErrorMessage } from "@/common/message";
import { useRoute } from "vue-router";
const { proxy } = getCurrentInstance() as any;
const route = useRoute();

const listData = reactive({
  tree: [] as any, //树形菜单
  tableData: [], //列表擦弹
  total: 0, //列表总条数
  isTreeLoading: false, //树菜单加载标识
  isListLoading: false, //列表加载动画标识
  opDialog: false, //弹窗显示隐藏标识
  addOrEdit: "", //弹窗标题
  oneUserInfo: {}, //修改回显存放值
  isPageLoading: null as any, //页面加载使用变量
});

/**
 * 定义请求数据
 */
let reqData = {
  groupId: "",
  keyword: "",
  status: route.query.status !== undefined ? route.query.status : null,
  page: 1,
};

/**
 * 查询方法
 * @param filter 查询条件对象
 * @reture viod
 */
const searchFunc = (filter: any) => {
  reqData.keyword = filter.keyword;
  reqData.status = filter.status;
  reqTableList();
};

/**
 * 获取列表
 * @reture viod
 */
const getTreeList = () => {
  listData.isTreeLoading = true;
  const res = proxy.$HTTP.get({
    url: "/task/plan/group/tree/list",
  });
  res
    .then((res: any) => {
      if (res.isOk) {
        listData.tree = res.data;
        if (res.data.length > 0 && reqData.groupId === "") {
          reqData.groupId = res.data[0].id;
          reqTableList();
        }
      }
      listData.isTreeLoading = false;
    })
    .catch((response: any) => {
      showErrorMessage({ message: response.data });
      listData.isTreeLoading = false;
    });
};

/**
 * 获取列表请求方法
 * @reture viod
 */
const reqTableList = () => {
  listData.isListLoading = true;
  const res = proxy.$HTTP.post({
    url: `/task/plan/queryPage`,
    params: {
      page: reqData.page,
      size: 10,
    },
    data: {
      groupId: reqData.groupId,
      keyword: reqData.keyword,
      status: reqData.status,
    },
  });
  res.then((res: any) => {
    if (res.isOk) {
      listData.tableData = res.data.records;
      if (res.data.records.length > 0) {
        listData.isPageLoading = true;
      } else {
        listData.isPageLoading = false;
      }
      listData.total = Number(res.data.total);
    }
    listData.isListLoading = false;
  });
};

/**
 * 加载资源列表
 * @param id 资源ID
 * @reture viod
 */
const getTableList = (id: number) => {
  reqData.groupId = id.toString();
  reqTableList();
};

/**
 * 根据页码跳转页面
 * @param pageNumber 页码
 * @reture viod
 */
const getCurrentPageNumber = (pageNumber: number) => {
  listData.isListLoading = true;
  reqData.page = pageNumber;
  reqTableList();
};

/**
 * 打开新增弹窗
 * @reture viod
 */
const dialogControlFunc = () => {
  listData.addOrEdit = "新增";
  listData.oneUserInfo = {};
  listData.opDialog = true;
};

/**
 * 新增节点
 * @param nodeItem 节点信息
 * @reture viod
 */
const addNode = (nodeItem: any) => {
  let addNodeApi = "/task/plan/group/rootNode";
  let addChildApi = "/task/plan/group/childNode";
  listData.isTreeLoading = true;
  const res = proxy.$HTTP.post({
    url: nodeItem.pid === "" ? addNodeApi : addChildApi,
    data: {
      groupName: nodeItem.groupName,
      pid: nodeItem.pid,
    },
  });
  res
    .then((res: any) => {
      if (res.isOk) {
        showSuccessMessage({ message: "添加成功" });
        getTreeList();
      }
      listData.isTreeLoading = false;
    })
    .catch((response: any) => {
      showErrorMessage({ message: response.data });
      listData.isTreeLoading = false;
    });
};

/**
 * 删除节点
 * @param id 节点ID
 * @reture viod
 */
const delNode = (id: any) => {
  listData.isTreeLoading = true;
  const res = proxy.$HTTP.delete({
    url: `/task/plan/group/taskPlanGroup/` + id,
  });
  res
    .then((res: any) => {
      if (res.isOk) {
        showSuccessMessage({ message: "删除成功" });
        getTreeList();
      }
      listData.isTreeLoading = false;
    })
    .catch((response: any) => {
      ElMessageBox.confirm(response.data, "提示", {
        showCancelButton: false,
        showConfirmButton: false,
        type: "error",
      });
      listData.isTreeLoading = false;
    });
};

/**
 * 编辑节点
 * @param nodeItem 节点信息
 * @reture viod
 */
const editNode = (nodeItem: any) => {
  listData.isTreeLoading = true;
  const res = proxy.$HTTP.put({
    url: "/task/plan/group/taskPlanGroup",
    data: {
      groupName: nodeItem.groupName,
      id: nodeItem.id,
    },
  });
  res
    .then((res: any) => {
      if (res.isOk) {
        showSuccessMessage({ message: "修改成功" });
        getTreeList();
      }
    })
    .catch((response: any) => {
      showErrorMessage({ message: response.data });
      listData.isTreeLoading = false;
    });
};

/**
 * 增加任务
 * @param arrangementItem 任务信息
 * @reture viod
 */
const saveArrangement = (arrangementItem: any) => {
  const res = proxy.$HTTP.post({
    url: "/task/plan/taskPlan",
    data: arrangementItem,
  });
  res
    .then((res: any) => {
      if (res.isOk) {
        showSuccessMessage({ message: "添加成功" });
        reqTableList();
        getTreeList();
      }
      listData.opDialog = false;
    })
    .catch((response: any) => {
      if (response.code !== 2001) {
        listData.opDialog = false;
      } else {
        showErrorMessage({ message: response.data[0].errorMsg });
        return;
      }
      showErrorMessage({ message: response.data[0].errorMsg });
    });
};

/**
 * 编辑弹窗控制
 * @param oneInfo 当前行数据值
 * @reture viod
 */
const dialogEditFunc = (oneInfo: any) => {
  listData.addOrEdit = "编辑";
  listData.oneUserInfo = { ...oneInfo };
  listData.opDialog = true;
};

/**
 * 删除任务
 * @param id 任务ID
 * @reture viod
 */
const delArrangementFunc = (id: string) => {
  //删除方法实现
  const res = proxy.$HTTP.delete({
    url: `/task/plan/taskPlan/` + id,
  });
  res
    .then((res: any) => {
      if (res.code === 200) {
        showSuccessMessage({
          message: "删除成功！",
        });
        listData.opDialog = false;
        reqTableList();
        getTreeList();
      }
    })
    .catch((response: any) => {
      listData.opDialog = false;
      showErrorMessage({ message: response.data });
    });
};

/**
 * 编辑任务
 * @param arrangementItem 任务信息
 * @reture viod
 */
const editArrangement = (arrangementItem: any) => {
  const res = proxy.$HTTP.put({
    url: "/task/plan/taskPlan",
    data: arrangementItem,
  });
  res
    .then((res: any) => {
      if (res.isOk) {
        showSuccessMessage({ message: "修改成功" });
        getTreeList();
        reqTableList();
      }
      listData.opDialog = false;
    })
    .catch((response: any) => {
      if (response.code !== 2001) {
        listData.opDialog = false;
      } else {
        showErrorMessage({ message: response.data[0].errorMsg });
        return;
      }
      showErrorMessage({ message: response.data[0].errorMsg });
    });
};

onMounted(() => {
  getTreeList();
});
</script>

<template>
  <div class="page-list">
    <el-row :gutter="20">
      <!-- 树形菜单 -->
      <el-col :span="5">
        <div class="page-list-word">任务分组</div>
        <the-tree
          :dataSource="listData.tree"
          :getTableList="getTableList"
          :addNode="addNode"
          :delNode="delNode"
          :editNode="editNode"
          :isTreeLoading="listData.isTreeLoading"
        ></the-tree>
      </el-col>
      <!-- 资源列表 -->
      <el-col :span="19" class="page-list-details">
        <div class="circle top"></div>
        <div class="circle bottom"></div>
        <div class="page-list-word">任务列表</div>
        <!-- 资源编排搜索 -->
        <arrangement-search
          :searchFunc="searchFunc"
          :dialogControlFunc="dialogControlFunc"
        ></arrangement-search>
        <!-- 资源编排数据 -->
        <arrangement-details
          :tableData="listData.tableData"
          :isPageLoading="listData.isPageLoading"
          :delArrangementFunc="delArrangementFunc"
          :dialogEditFunc="dialogEditFunc"
          :isListLoading="listData.isListLoading"
          :reqTableList="reqTableList"
        ></arrangement-details>
        <!-- 资源编排分页 -->
        <task-pagination
          :total="listData.total"
          :getCurrentPageNumber="getCurrentPageNumber"
        ></task-pagination>
      </el-col>
    </el-row>
    <el-dialog
      v-model="listData.opDialog"
      v-if="listData.opDialog"
      :title="listData.addOrEdit"
      :width="740"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      custom-class="task-arrangement-dialog"
    >
      <!-- 新增弹窗 -->
      <operation-dialog
        :addOrEdit="listData.addOrEdit"
        :saveArrangement="saveArrangement"
        :editArrangement="editArrangement"
        :oneUserInfo="listData.oneUserInfo"
      />
    </el-dialog>
  </div>
</template>

<style lang="scss">
.task-arrangement-dialog {
  .el-dialog__body {
    height: calc(100vh - 350px);
    overflow: auto;
  }
}
</style>
<style scoped lang="scss">
.page-list {
  background-color: #fff;
  padding: 15px;
  height: calc(100vh - 130px);
  .el-row {
    height: 100%;
  }
  .page-list-details {
    position: relative;
    .page-list-word {
      padding-left: 35px;
    }
    .circle {
      height: 80px;
      width: 20px;
      background-color: #f2f2f6;
      border-radius: 10px;
      position: absolute;
    }
    .top {
      top: -30px;
    }
    .bottom {
      bottom: -30px;
    }
  }
  .page-list-word {
    font-size: 16px;
    color: #000;
    margin-bottom: 15px;
  }
}
</style>
